<template>
  <div class="com-container" style="fontsize: 12px">
    <div
      class="com-chart com-charts"
      ref="echarts"
      style="z-index: 555; position: relative"
    ></div>
  </div>
</template>

<script>
export default {
  props: ["commonData"],
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      xDatas: null,
    };
  },
  watch: {
    commonData: {
      handler(newVal) {
        if (newVal) {
          this.allData = newVal;

          this.getData();
        }
      },
      immediate: true,
    },
  },

  mounted() {
    var that = this;
    setTimeout(() => {
      that.initChart();
      window.addEventListener("resize", that.screenAdapter);
      // 在页面加载完成的时候, 主动进行屏幕的适配
      that.screenAdapter();
    }, 100);
  },

  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);
      const payload = {
        id: "left-bottom-1",
        title: ["未闭合", "已闭合", "闭合率"],
        color: [
          "rgba(43, 139, 248, 0.97)",
          "rgba(18, 196, 254, 0.97)",
          "rgba(16, 233, 220, 0.97)",
          "rgba(17, 220, 151, 0.97)",
        ],
        wordNum: 3,
        data: {
          data1: ["10", "19", "68", "210", "125"],
          data2: ["20", "22", "174", "25", "77"],
          x: ["砼拌合站", "水稳拌合站", "沥青拌合站", "智能拉张", "智能压浆"],
          total1: 197,
          total2: 197,
        },
      };

      const data1 = payload.data.data1;
      const data2 = payload.data.data2;

      const x = payload.data.x;

      // const wordNum = payload.wordNum;

      // const formatter = (params, wordNum) => {
      //     if (!wordNum) return params;
      //     let newParamsName = '';
      //     const paramsNameNumber = params.length;
      //     const provideNumber = wordNum;
      //     const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
      //     if (paramsNameNumber > provideNumber) {
      //         for (let p = 0; p < rowNumber; p++) {
      //             let tempStr = '';
      //             const start = p * provideNumber;
      //             const end = start + provideNumber;
      //             if (p === rowNumber - 1) {
      //                 tempStr = params.substring(start, paramsNameNumber);
      //             } else {
      //                 tempStr = params.substring(start, end) + '\n';
      //             }
      //             newParamsName += tempStr;
      //         }
      //     } else {
      //         newParamsName = params;
      //     }
      //     return newParamsName;
      // };
      var option = {
        grid: {
          left: 15,
          right: 15,
          bottom: 2,
          top: 45,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(9, 30, 60, 0.6)",
          extraCssText: "box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;",
          borderWidth: 0,
          confine: false,
          appendToBody: true,
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
        },
        legend: {
          width: window.innerWidth < 1600 ? "100%" : "60%",
          icon: "rect",
          top: 7,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            color: "rgba(23, 26, 29, 1)",
            fontSize: 14,
          },
          align: "left",
        },
        xAxis: {
          data: x,
          axisTick: {
            show: false,
          },

          axisLine: {
            lineStyle: {
              color: "rgba(126, 134, 142, 0.5)",
              width: 0.8,
            },
          },
          axisLabel: {
            interval: 0,
            rotate: 0,
            color: "rgba(23, 26, 29, 1)",
            fontSize: 14,
            // formatter(params) {
            //     return formatter(params, wordNum);
            // },
          },
        },
        yAxis: [
          {
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255, 129, 109, 0.1)",
                width: 1, //这里是为了突出显示加上的
              },
            },
            axisLabel: {
              color: "rgba(23, 26, 29, 1)",
              fontSize: 14,
            },
            splitArea: {
              areaStyle: {
                color: "rgba(255,255,255,.5)",
              },
            },

            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(126, 134, 142, 0.24)",
                type: "dotted",
              },
            },
            // splitLine: {
            //     show: true,
            //     lineStyle: {
            //         color: 'rgba(255, 129, 109, 0.1)',
            //         width: 0.5,
            //         type: 'dashed',
            //     },
            // },
          },
          {
            type: "value",
            nameTextStyle: {
              color: "rgba(185, 185, 185, 1)",
            },
            max: 100,
            position: "right",
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "rgba(23, 26, 29, 1)",
                fontSize: 14,
              },
            },
          },
        ],
        series: [
          {
            name: payload.title[0],
            type: "pictorialBar",
            barGap: "-20%",
            symbol: "path://M18,3 L46,3 78,68 18,68 46,3 z",

            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(184, 143, 255, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(184, 143, 255, 0.10)",
                  },
                ],
                global: false, //  缺省为  false
              },
            },
            emphasis: {
              itemStyle: {
                opacity: 1,
              },
            },
            data: data1,
          },
          {
            name: payload.title[1],
            type: "pictorialBar",
            barGap: "-20%",
            symbol: "path://M18,3 L46,3 78,68 18,68 46,3 z",

            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(255, 213, 77, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 213, 77, 0.10)",
                  },
                ],
                global: false, //  缺省为  false
              },
            },
            emphasis: {
              itemStyle: {
                opacity: 1,
              },
            },
            data: data2,
          },
          {
            name: payload.title[2],
            type: "line",
            smooth: true,
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            lineStyle: {
              color: " rgba(146, 217, 67, 1)",
              width: 2,
            },
            symbol: "circle",
            symbolSize: 6,
            itemStyle: {
              color: "rgba(146, 217, 67, 1)",
            },
            z: 13,
            areaStyle: {
              origin: 50,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(146, 217, 67, 0.12)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(146, 217, 67, 0)", //   100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            data: [60, 45, 70, 24, 66],
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
    getData() {
      var that = this;

      setTimeout(() => {
        that.updateChart();
        // that.updateChart();
      }, 800);
    },
    updateChart() {
      var data = this.allData;

      // var updateData = null
      // if (data.length > 0 && data != undefined) {
      //     updateData = [data[0].F_WaterActualValue, data[0].F_Cement1ActualValue, data[0].F_Cement2ActualValue, data[0].F_Aggregate1ActualValue, data[0].F_Aggregate2ActualValue, data[0].F_Aggregate3ActualValue, data[0].F_Aggregate4ActualValue, data[0].F_Aggregate5ActualValue, data[0].F_OreActualValue, data[0].F_FlyashActualValue, data[0].F_Admixture1ActualValue, data[0].F_Admixture2ActualValue]
      // } else {
      //     updateData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
      // }

      // const value = updateData;
      var dataOption = {
        title: {
          text:
            this.time1.substr(0, 10) +
            "至" +
            this.time2.substr(0, 10) +
            "混凝土产量统计",
        },
        xAxis: {
          // data: ['C10', 'C15', 'C20', 'C25', 'C30', 'C35', 'C40', 'C45', 'C50', 'C55', 'C60', 'other'],//数据
          data: data.StrengthGrade,
        },
        series: [
          {
            data: data.ActualCalculation, //方量
          },
          {
            data: data.DiskNumber, // 盘数
          },
        ],
      };

      this.chartInstance.setOption(dataOption);
    },
    screenAdapter() {
      const titleFontSize = this.$refs.echarts.offsetWidth / 100;

      //   和分辨率大小相关的配置项
      const adapterOption = {
        // title: {
        //     textStyle: {
        //         fontSize: titleFontSize,
        //     },
        // },

        legend: {
          textStyle: {
            fontSize: titleFontSize * 1.2,
          },
          itemWidth: titleFontSize * 1.2876,
          itemHeight: titleFontSize * 1.2876,
          itemGap: titleFontSize * 3,
        },
        xAxis: [
          {
            axisLabel: {
              textStyle: {
                fontSize: titleFontSize * 1.2,
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              textStyle: {
                fontSize: titleFontSize * 1.2,
              },
            },
          },
          {
            axisLabel: {
              textStyle: {
                fontSize: titleFontSize * 1.2,
              },
            },
          },
        ],
        series: [
          {
            barWidth: titleFontSize * 7, //柱子宽
          },
          {
            barWidth: titleFontSize * 7, //柱子宽度
          },
        ],
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scope></style>
